<script setup>
import { ref, reactive, watch, computed } from "vue";
import { DeleteLocation, Search } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessageBox } from "element-plus";
import DailogitemEdit from "./dialogitemEdit.vue";

// 待办编号
const toDoNumber = ref(8);
// 当前页码
const pageSize = ref(10);
const currentPage = ref(1);
const totalList = ref(0);
// 表格数据 axios 获取
const tableData = ref([]);
let subTotal = ref(0);
const getCurentPageData = async () => {
  const res = await axios({
    method: "get",
    url: "/getData",
    data: {
      pageSize: pageSize.value,
      currentPage: currentPage.value,
    },
  });
  console.log("更新页面2");
  console.log(typeof res)
  tableData.value = res.data.currentPageData;
  totalList.value = res.data.totalData;
};
getCurentPageData();
// 数据删除
const deleteId = ref("");
const deleteitem = async () => {
  let res = await axios({
    url: "/deleteData",
    method: "post",
    data: {
      deleteId: deleteId.value,
    },
  });
  console.log("删除数据1", res.data);
  // 删除后再更新当前页数据，更新放在删除中，可以保证每次更新都在删除之后
  // upData();
};

// 按钮事件
// 编辑
// 当前行数据父传子
let selctionRow = ref(null);
let visible = ref(0);
// 对话框取消按钮事件 父传子
const handleCloseVisiable = () => {
  visible.value = 0;
  // selctionRow = null;
};
// 点击编辑按钮
const handleEdit = (index, row) => {
  // 点击编辑时，visible=1
  console.log("编辑");
  selctionRow.value = row;
  console.log("传出数据", selctionRow.value);
  visible.value = 1;
  console.log("传出visi", visible.value);
};

const addNew = () => {
  // 点击编辑时，visible=1
  console.log("新增");
  visible.value = 2;
  console.log("传出visi", visible.value);
};
const upData = () => {
  getCurentPageData();
};

console.log("fdf", subTotal.value);
const handleDelete = (index, row) => {
  deleteId.value = row.id;
  ElMessageBox.confirm("是否确认删除？")
    .then(async () => {
      // 异步操作，先删除数据，再执行更新
      await deleteitem();

      upData();

      // 直接在当前表格数据中操作
      // tableData.value.splice(index, 1);
      // 每删除一个数据 总数据值减1
      // subTotal.value--
      // console.log('ssdfs',subTotal.value)
      // setTimeout(() => {
      //   upData();
      // }, 1);

      // console.log('更新页面2')
    })
    .catch(() => {});
};
// 关键字查询

const searchContent = ref("");
// 搜索状态，当搜索关键词不为空并点击搜索后为1
const searchState = ref(0);
// 得有两个搜索函数，一个确定关键词首次搜索，从第一页返回结果
// 第二个函数按当前页展示搜索结果，作为搜索结果的分页使用
const handleSearchByCurrentPage = () => {
  if (searchContent.value !== "") {
    searchState.value = 1;
    axios({
      url: "/searchData",
      method: "post",
      data: {
        searchKey: searchContent.value,

        pageSize: pageSize.value,
        // 搜索结果从第一页开始展示

        currentPage: currentPage.value,
      },
    }).then((res) => {
      tableData.value = res.data.currentPageData;
      totalList.value = res.data.totalData;
      // 一旦拿到搜索结果，组件中的tableData就一直锁定在结果数据
      // 改变当前分页，不从总数据更新

      // console.log('当前总数据',totalList.value)
    });
  } else {
    searchState.value = 0;
    getCurentPageData();
    console.log("搜索状态", searchState.value);
  }
};
const handerSearchFist = () => {
  // 如果搜索内容为空 则直接返回第一页数据
  if ((searchContent.value ?? "") !== "") {
    searchState.value = 1;
    currentPage.value = 1;
    axios({
      url: "/searchData",
      method: "post",
      data: {
        searchKey: searchContent.value,

        pageSize: pageSize.value,
        // 搜索结果从第一页开始展示

        currentPage: currentPage.value,
      },
    }).then((res) => {
      tableData.value = res.data.currentPageData;
      totalList.value = res.data.totalData;
      // 一旦拿到搜索结果，组件中的tableData就一直锁定在结果数据
      // 改变当前分页，不从总数据更新

      // console.log('当前总数据',totalList.value)
    });
  } else {
    searchState.value = 0;
    getCurentPageData();
    console.log("搜索状态", searchState.value);
  }
};

watch(currentPage, () => {
  if (searchState.value === 0) {
    console.log("无搜索切换分页");
    getCurentPageData();
  } else {
    console.log("有搜索切换分页");
    handleSearchByCurrentPage();
  }
});
// 监听当前表数据长度，当最后一页数据条目为0时，刷新页面
// watch(subTotal,()=>{
//   // 总条目数为每页条目数的倍数
//   console.log('总条目改变',subTotal.value)
//   if(subTotal.value % 10===0){
//     // 怎么刷新页面？重新拉取数据？total 减1？

//     getCurentPageData()
//   }
// })
// 分页事件
// @current-change="handleCurrentChange"
// const handleCurrentChange=()=>{
//   getCurentPageData()
// }
</script>
<template>
  <div class="personal-wrap">
    <div class="title">
      <h1>我的待办任务({{ toDoNumber }})</h1>
      <p>Enjoy your coder life</p>
    </div>
    <!-- 搜索框和新建按钮 -->
    <div class="search-newBuilt">
      <el-card class="search-card">
        <!-- 左侧搜索框 -->
        <el-input
          class="input-search"
          v-model="searchContent"
          placeholder="输入任务关键词"
          clearable
        />
        <el-button
          class="butt-search"
          :icon="Search"
          @click="handerSearchFist"
          circle
        />
        <!-- 右侧新建按钮 -->
        <el-button
          class="butt-newBuilt"
          type="success"
          size="large"
          @click="addNew"
          >新建</el-button
        >
      </el-card>
      <!-- 表格部分 -->
      <el-card class="table">
        <el-table
          class="tabel-content"
          :data="tableData"
          style="width: 100%"
          stripe
          border
        >
          <el-table-column
            type="index"
            label="编号"
            width="60"
            resizable
            align="center"
          />
          <el-table-column
            prop="name"
            label="任务名称"
            min-width="200"
            resizable
            align="center"
          />
          <el-table-column
            prop="state"
            label="任务状态"
            min-width="200"
            resizable
            align="center"
          />
          <el-table-column
            prop="upDate"
            label="更新时间"
            min-width="200"
            resizable
            align="center"
          />
          <el-table-column
            prop="builtDate"
            label="创建时间"
            min-width="200"
            resizable
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="200"
            align="center"
          >
            <template #default="scope">
              <el-button
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination-wrap">
          <el-pagination
            class="pagination"
            background
            :page-size="pageSize"
            v-model:current-page="currentPage"
            :pager-count="5"
            layout="prev, pager, next"
            :total="totalList"
          />
        </div>
      </el-card>
    </div>
    <DailogitemEdit
      :selctionRow="selctionRow"
      :visible="visible"
      @handleCloseVisiable="handleCloseVisiable"
      @upData="upData"
    />
  </div>
</template>
<style lang="scss" scoped>
.personal-wrap {
  width: 80%;
  margin: 0 auto;
}
.title {
  text-align: center;
  font-size: 20px;
}
.search-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;

  .input-search {
    width: 300px;
    height: 40px;
  }
  .butt-search {
    margin-left: 10px;
  }
  .butt-newBuilt {
    position: absolute;
    right: 95px;
  }
}
.table {
  .pagination-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
}
</style>
